<template>
  <view>
    <!-- #ifndef MP-WEIXIN-->
    <my-navbar leftText="积分商城" @leftClick="back"></my-navbar>
    <!-- #endif -->
    <view class="content">
      <view class="list_row" v-for="item,index in dataList" :key="index">
        <view class="info">
          <image
            class="buy"
            @click.stop="showCart(item)"
            src="/static/image/addcart.svg"
          ></image>
          <image class="img" mode="aspectFit" :src="item.img"></image>
          <view class="name">{{ item.goods_name }}</view>
          <view class="tag">积分</view>
          <view class="red_font fonts_26 jifen">{{ item.points }}积分兑换</view>
          <view class="store">
            <text v-if="item.once_limit > 0">限兑：{{ item.once_limit }}</text>
            <text style="margin-left: 8rpx"
              >库存：{{ item.inventory_surplus }}</text
            >
          </view>
        </view>
      </view>
    </view>
    <my-addcart ref="minicart"></my-addcart>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      page: 1,
      count: 0,
      dataList: [],
    };
  },
  onLoad() {
    this.getData(1);
  },
  methods: {
    getData(page) {
      let params = {
        page,
        size: 15,
      };
      $https("GET", "getPointsGoodsList", params, (res) => {
        if (res.data.errcode == 0) {
          this.count = res.data.data.count;
          this.page = page;
          let datas = res.data.data.list;
          this.dataList = this.dataList.concat(datas);
          console.log(this.dataList);
        }
      });
    },
    //显示小购物车
    showCart(data) {
      let newData = {
        id: data.goods_id,
        name: data.goods_name,
        img: data.img,
        is_standard: data.is_standard,
        isJF: true,
        spu: [
          {
            market_price: data.points,
            id: data.goods_spu.id,
            minimum: 0,
            inventory_left: data.inventory_surplus,
            designated_inventory: 1, //是否无限量供应
            spu_name: data.goods_spu.spu_name.title,
            unit: data.goods_spu.spu_unit.title,
          },
        ],
      };
      this.$refs.minicart.open(newData);
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
  onReachBottom() {
    if (this.dataList.length < this.count) {
      this.page++;
      this.getData(this.page);
    }
  },
};
</script>

<style lang="scss">
.content {
  padding: 10rpx;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, 360rpx);
  gap: 10rpx;
}
.list_row {
  // float: left;
  width: 360rpx;
  // min-height: 340rpx;
  background: $white;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 4rpx rgba(215, 239, 231, 0.5);
  // margin-bottom: 20rpx;
  &:nth-child(even) {
    // margin-left: 26rpx;
  }
  .logo {
    height: 40rpx;
  }
  .info {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .buy {
      position: absolute;
      right: 10rpx;
      bottom: 12rpx;
      width: 50rpx;
      height: 50rpx;
      z-index: 1;
    }
    .img {
      width: 360rpx;
      height: 360rpx;
    }
    .name {
      color: #191919;
      font-size: 26rpx;
      padding: 0 20rpx;
      margin-bottom: 8rpx;
      font-weight: bold;
    }
    .tag {
      font-size: 20rpx;
      display: inline-block;
      padding: 4rpx 10rpx;
      transform: scale(0.8);
      color: #fff;
      background: #f7c23e;
      border-radius: 8rpx;
      margin-left: 20rpx;
      margin-bottom: 8rpx;
    }
    .jifen {
      padding: 0 20rpx;
      margin-bottom: 8rpx;
    }
    .store {
      color: #666;
      font-size: 24rpx;
      margin: 0 20rpx 20rpx;
    }
  }
}
</style>
